<!DOCTYPE html>
<html>
	<head>
		<title>按钮变色</title>
		<meta charset="utf-8">
		<style type="text/css">
			button{
				margin:20px;
				width:100px;
				height: 50px;
			}
		</style>
	</head>
	<body>
		<button onclick="bg(this,'red')">变红</button>
		<button onclick="bg(this,'green')">变绿</button>
		<button onclick="bg(this,'blue')">变蓝</button>
		<button onclick="bg(this,'#000')">变黑</button>
		<script type="text/javascript">
			// 需求：点击按钮，该按钮的背景色变成提示的颜色
			// 方法一：匿名函数+点击事件  重复代码多
			var btn = document.getElementsByTagName("button");
			// console.log(btn);
			/*btn[0].onclick = function(){
				btn[0].style.background = "red";
			}
			btn[1].onclick = function(){
				btn[1].style.background = "green";
			}
			btn[2].onclick = function(){
				btn[2].style.background = "blue";
			}*/

			// 方法二：for循环 this当前节点 只能实现变同一个颜色
		
			/*for(var i=0;i<btn.length;i++){
				btn[i].onclick = function(){
					this.style.background = "red";
				}
			}*/

			// 方法三：传参
			function bg(jie,col){
				jie.style.background = col;
			}
		</script>
	</body>
</html>